<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/index.css" />
		<link rel="stylesheet" type="text/css" href="../../css/bootstrap.css" />
		<link rel="stylesheet" type="text/css" href="../../css/reset-css/reset-css.css" />
	</head>

	<body>
		<!--公开课-->
		<div class="OpenClass">
			<!--头部区域开始-->
			<div class="header">
				<div class="topbar">
					<div class="box_width">
						<!--左侧-->
						<span class="topbarL"><a href="#">提示文字：快速通道</a></span>
						<!--右侧-->
						<span class="topbarR">全国咨询/投诉热线：XXX-XXX-XXXX   举报邮箱:XX@qq.com</span>
					</div>
				</div>
				<!--导航栏开始-->
				<div class="nav">
					<div class="box_width">
						<ul class="ul">
								<li class="li">
								<a href="../../index.html">首页</a>
							</li>
							<li class="li">
								<a href="../Animation/index.html" target="_blank">CSS3动画</a>
							</li>
							<li class="li">
								<a href="../BigData/index.html" target="_blank">大数据</a>
							</li>
							<li class="li">
								<a href="../book/index.html" target="_blank">书籍库</a>
							</li>
							<li class="li">
								<a href="../system/index.html" target="_blank">课程体系</a>
							</li>
							<li class="li">
								<a href="../service/index.html" target="_blank">就业服务</a>
							</li>
							<li class="li">
								<a href="../OpenClass/index.html" target="_blank">公开课程</a>
							</li>
							<li class="li">
								<a href="../prospect/index.html" target="_blank">精品推荐</a>
							</li>
							<li class="li">
								<a href="../about/index.html" target="_blank">关于联系</a>
							</li>
						</ul>
					</div>
				</div>
				<!--导航栏结束-->
				<!--轮播图区域开始-->
				<div class="banner">
					<div id="myCarousel" class="carousel slide">
						<!-- 轮播（Carousel）指标 -->
						<ol class="carousel-indicators">
							<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
							<li data-target="#myCarousel" data-slide-to="1"></li>
						</ol>
						<!-- 轮播（Carousel）项目 -->
						<div class="carousel-inner">
							<div class="item active">
								<div class="Img">
									<img src="../../img/picture/banbg1.jpg" />
									<img src="../../img/picture/banbg2.jpg" />
								</div>

								<div class="carousel-caption">人工智能开发</div>
							</div>
							<div class="item">
								<div class="Img">
									<img src="../../img/picture/banbg3.jpg" />
									<img src="../../img/picture/banbg4.jpg" />
								</div>
								<div class="carousel-caption">编程计算</div>
							</div>
						</div>
						<!-- 轮播（Carousel）导航 -->
						<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
							<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
							<span class="sr-only">Previous</span>
						</a>
						<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
							<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
							<span class="sr-only">Next</span>
						</a>
					</div>

				</div>
				<!--轮播图区域结束-->
			</div>
			<!--头部区域结束-->
			<!--近期公开课区域开始-->
			<div class="recent">
				<div class="box_width">
					<!--标题-->
					<div class="titleBox">
						<!--标题-->
						<div class="title">
							<span>近期</span>直播公开课
							<img src="img/recent.png" />
						</div>
					</div>
					<!--课程区域开始-->
					<div class="course">
						<ul>
							<li v-for="index in 12">
								<div class="li_top">
									<img src="img/zhibo.png" />
								</div>
								<div class="li_center">
									Python大数据分析电影关注点
								</div>
								<div class="li_bottom">
									<span><span class="glyphicon glyphicon-fire"></span>97人报名</span>
									<a href="#">立即报名</a>
								</div>
							</li>
						</ul>
					</div>
					<!--课程区域结束-->

					<!--往期公开课开始-->
					<div class="period">
						<div class="box_width">
							<!--标题-->
							<div class="titleBox">
								<!--标题-->
								<div class="title">
									<span>往期</span>直播公开课
									<img src="img/recent.png" />
								</div>
							</div>
							<ul>
								<li v-for="index in 6">
									<!--图片内容-->
									<div class="Img">
										<img src="img/period.jpg" />
										<div class="ImgBox">
											<h3>HTML5大前端7月第4期体验课</h3>
											<p>已有<span>70113</span>人学习</p>
										</div>
									</div>
									<!--文字-->
									<div class="TextP" v-for="index in 5">
										<span>Day{{index}}：打通网页的“骨络筋脉”-HTML </span>
										<a href="#">立即学习</a>
									</div>
								</li>
							</ul>
						</div>
					</div>
					<!--往期公开课结束-->
				</div>
			</div>
			<!--近期公开课区域结束-->

			<!--底部内容结束-->
			<div class="footer">
				<div class="box_width">
					<!--导航栏-->
					<div class="nav">
						<div class="navLi" v-for="(item,index) in footerNan" @click="Footer(item,index)" :class="{'navLiA':index==footerIndex}">{{item.name}}</div>
					</div>
					<!--主要区域-->
					<div class="main">
						<!--主要左侧-->
						<div class="main_left">
							<ul>
								<li>{{this.footerCity}}</li>
								<li>咨询电话：<span>888-8888-888888</span></li>
								<li>面授课程：HTML5大前端培训、JavaEE+分布式开发培训、Python人工智能+数据分析培训、全链路UI/UE设计培训、云计算培训、全栈软件测试培训、大数据+人工智能培训、智能物联网+嵌入式培训、Unity游戏开发培训、网络安全培训、区块链培训、影视剪辑包装培训、游戏原画培训、全媒体运营培训</li>
								<li>认证课程：软考、Adobe认证、PMP认证、红帽RHCE认证</li>
							</ul>
						</div>
						<!--主要右侧-->
						<div class="main_right">
							<div class="box" v-for="(item,index) in 3">
								<div class="img">
									<img src="../../img/picture/QRcode.png" />
								</div>
								<p>扫一扫了解更多课程</p>
							</div>
						</div>
					</div>
					<div class="Btm">
						<div class="BtmNan">

						</div>
					</div>
				</div>
			</div>
			<!--底部内容结束-->
		</div>

	</body>
	<script src="../../js/jquery.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../js/vue.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/index.js" type="text/javascript" charset="utf-8"></script>

</html>